<template>
    <transition name="slide">
      <music-list :title="title" :bgImage="bgImage" :songs="songs"></music-list>
    </transition>
</template>

<script>
    import MusicList from 'components/music-list/music-list'
    import {getSonglist} from "api/recommend"; // jsonp请求歌单详情
    import {mapGetters} from 'vuex'
    import {ERR_OK} from "../../api/config";
    import {createSong} from "common/js/song";
    import {getMusic} from "api/singer";

    export default {
      name: "disc",
      data () {
        return {
          songs:[]
        }
      },
      computed: {
        ...mapGetters([
          'disc'
        ]),
        title () {
          return this.disc.dissname
        },
        bgImage () {
          return this.disc.imgurl
        }
      },
      created () {
        this._getSongList();
      },
      methods: {
        _getSongList() {
          // 当前页面刷新五 dissid，就回退到上一个页面
          if (!this.disc.dissid) {
            this.$router.push('/recommend');
            return
          }
          getSonglist(this.disc.dissid).then((res)=>{
            if (res.code === ERR_OK) {
              console.log(res);
              this.songs =this._normalizeSongs(res.cdlist[0].songlist);
              console.log(this.songs)
            }
          })
        },
        // 对请求到的数据进行处理
        _normalizeSongs (list) {
          let ret = [];
          list.forEach((musicData) => {
            if(musicData.songid && musicData.albummid){
              getMusic(musicData.songmid).then(res=>{
                if (res.code === ERR_OK) {
                  const svkey = res.data.items;
                  const songVkey = svkey[0].vkey;
                  const newSong = createSong(musicData,songVkey)
                  ret.push(newSong)
                }
              })
            }
          });
          return ret;
        }
      },
      components: {
        MusicList
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>
